<template>

  <!--  vant组件库-->
  <div class="xskb">
    <!--Header-->
    <Header :title="title">
      <template v-slot:timeTableWeekSlot>
        <span @click="showOverlayWeek()" style="font-size: 4vw">第{{ checked ? checked : getWeek }}周</span>
      </template>
    </Header>
    <!--    select-->
    <van-overlay :show="showWeek" :lock-scroll="false" style="background-color: white; z-index:2;  overflow-y: auto; ">
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <van-cell :title="`第`+value+`周`" clickable v-for="value in 20" :key="value" @click="handleChecked(value)">
            <template #right-icon>
              <van-radio :name="value"></van-radio>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-sticky position="bottom" style="width: 100%;">
        <van-cell style="padding: 0;">
          <van-button type="primary" size="large" @click="closeOverlayWeek">返回</van-button>
        </van-cell>
      </van-sticky>
    </van-overlay>
    <!--课程表 Grid 宫格-->
    <!--        head-->
    <van-grid :column-num="8" style="height: 100%;">
      <van-grid-item>
        <div class="course" style="background-color: rgba(154,155,157,0.14)">
             <span class="font-size"  style="color: #9a9b9d">
               {{ month }}
             </span>
        </div>
      </van-grid-item>
      <van-grid-item v-for="index in 7" :key="index" style="height: 10vw;overflow: hidden;">
        <div class="course" style="background-color: rgba(154,155,157,0.14)">
             <span class="font-size" style="color: #6d6d6d">
               {{ weeks[index - 1] }}
             </span>
        </div>
      </van-grid-item>
    </van-grid>

    <van-grid :column-num="8" v-for="(part,index) in parts" :key="index" style="height: 100%;">
      <van-grid-item class="font-size">
        <div class="course" style="background-color: rgb(247,247,247)">
             <span class="font-size" style="color: #6d6d6d">
               {{ part }}
             </span>
        </div>
      </van-grid-item>
      <van-grid-item v-for="item in 7" :key="item"
                     style="height: 30vw;overflow: hidden"
                     @click="showOverlayCourse(part, item, checked ? checked : getWeek)"
      >
        <div class="course round" :style="getColor(part, item, checked?checked:getWeek)">
             <span class="font-size" style="color: white">
               {{ getCourse(part, item, checked ? checked : getWeek) }}
             </span>
        </div>
      </van-grid-item>
    </van-grid>
    <!--            详细信息-->
    <v-dialog v-model:show="show" title="详细信息">
      <van-cell title="课程名字" :value="courseObj.courseName"></van-cell>
      <van-cell v-if="userType === 'stud' " title="任课教师" :value="courseObj.courseTeacher"></van-cell>
      <van-cell v-else title="教学班级" :value="courseObj.courseTeacher"></van-cell>
      <van-cell title="课程周数" :value="courseObj.courseWeek"></van-cell>
      <van-cell title="课程节数" :value="courseObj.coursePart"></van-cell>
      <van-cell title="上课地点" :value="courseObj.courseAddress"></van-cell>
    </v-dialog>
  </div>

</template>

<script>

import {reactive, computed, onMounted} from 'vue';
import axios from "axios";
import {Dialog} from "vant";
import 'vant/es/dialog/style';
import {getXskb} from "/src/api/hbmy_wx/xskb";
import {Toast} from 'vant';
import 'vant/es/toast/style';

export default {

  components: {
    'v-dialog': Dialog.Component,
  },
  setup() {
    const colorMap = new Map();
    let colorIndex = 0;
    const data = reactive({
      title: "课表",
      weeks: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      parts: ["第1-2节", "第3-4节", "第5-6节", "第7-8节", "第9-10节"],
      colors: ["#8BA2FF",
        "#FF6160",
        "#FEBF00",
        "#97CFF2",
        "#72BD3C",
        "#FF9899",
        "#F58345",
        "#EFA5E0",
        "#F88183"],
      firstTime: null,
      courseTable: null,
      showWeek: false,
      checked: null,
      show: false,
      courseObj: {
        "courseName": "",
        "courseTeacher": "",
        "courseWeek": "",
        "coursePart": "",
        "courseAddress": "",
      },
      userType: ''
    });

    // 获取数据
    const initData = async () => {
      const object = JSON.parse(localStorage.getItem('USERINFO'));
      data.userType = localStorage.getItem("userType");
      // const res = await axios.get('/hbmy_wx/xskb'); console.log(res.data);
      const res = await getXskb()
      // console.log('kb',res.response.value);
      data.firstTime = res.response.value.firstTime;
      data.courseTable = res.response.value.courseTable;


      for (let courseTableKey in data.courseTable) {
        // console.log(data.courseTable[courseTableKey].course);
        if (!colorMap.has(data.courseTable[courseTableKey].course)) {
          colorMap.set(data.courseTable[courseTableKey].course, "background-color:" + data.colors[(colorIndex++) % data.colors.length]);
        }
        // console.log(colorMap);
      }
    };
    // 获取当前月
    const month = computed(() => {
      return new Date().getMonth() + 1 + '月';
    });

    //获取当前周
    const getWeek = computed(() => {
      let time = new Date().valueOf() - data.firstTime;
      let week = Math.floor(time / 1000 / 60 / 60 / 24 / 7 + 1);

      if(week<1 || week>20){
        return 1;
      }else{
        return week;
      }
    });
    // 获取当前课程
    const getCourse = (part, weekN, nowWeek) => {
      for (let courseTableKey in data.courseTable) {
        let weeks = data.courseTable[courseTableKey].week.split('-');
        let startWeek = parseInt(weeks[0]);
        let endWeek = parseInt(weeks[1].split('周')[0]);

        if (nowWeek >= startWeek && nowWeek <= endWeek) {
          if (weekN == data.courseTable[courseTableKey].weekN && part == data.courseTable[courseTableKey].part) {
            if (data.courseTable[courseTableKey].room)
              return data.courseTable[courseTableKey].course + '\n' + data.courseTable[courseTableKey].room;
            else
              return data.courseTable[courseTableKey].course;

          }
        }
      }
    }
    //颜色
    const getColor = (part, weekN, nowWeek) => {
      for (let courseTableKey in data.courseTable) {
        let weeks = data.courseTable[courseTableKey].week.split('-');
        let startWeek = parseInt(weeks[0]);
        let endWeek = parseInt(weeks[1].split('周')[0]);

        if (nowWeek >= startWeek && nowWeek <= endWeek) {
          if (weekN == data.courseTable[courseTableKey].weekN && part == data.courseTable[courseTableKey].part) {
            console.log(colorMap.get(data.courseTable[courseTableKey].course));
            return colorMap.get(data.courseTable[courseTableKey].course);
          }
        }
      }
    };

    const showOverlayWeek = () => {
      data.showWeek = true;
    };
    const closeOverlayWeek = () => {
      data.showWeek = false;
    };
    const handleChecked = (value) => {
      data.checked = value;
      data.showWeek = false;
    };

    const showOverlayCourse = (part, weekN, nowWeek) => {
      for (let courseTableKey in data.courseTable) {
        let weeks = data.courseTable[courseTableKey].week.split('-');
        let startWeek = parseInt(weeks[0]);
        let endWeek = parseInt(weeks[1].split('周')[0]);

        if (nowWeek >= startWeek && nowWeek <= endWeek) {
          if (weekN == data.courseTable[courseTableKey].weekN && part == data.courseTable[courseTableKey].part) {
            // return colorMap.get(data.courseTable[courseTableKey].course);
            data.show = true;
            data.courseObj.coursePart = data.courseTable[courseTableKey].part;
            data.courseObj.courseAddress = data.courseTable[courseTableKey].room;
            data.courseObj.courseName = data.courseTable[courseTableKey].course;
            data.courseObj.courseWeek = data.courseTable[courseTableKey].week;
            data.courseObj.courseTeacher = data.courseTable[courseTableKey].teacher;
            console.log(data.courseObj);
          }
        }
      }
    };
    onMounted(() => {
      initData();
      getCourse();
      getColor();
    });

    return {
      ...toRefs(data),
      month,
      getWeek,
      getCourse,
      getColor,
      showOverlayWeek,
      closeOverlayWeek,
      handleChecked,
      showOverlayCourse,
    }
  }
}

</script>

<style scoped>
>>> .van-grid-item__content {
  padding: 0;
  margin: 0;
}

>>> .van-grid-item__text {
  line-height: 1.5;
  text-align: center;
  font-size: 3vw;
}

.course {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.font-size {
  font-size: 3vw;
}

.round {
  border-radius: 2vw;
}

@media (min-width: 768px) {
  .font-size {
    font-size: 3vw; /* 在宽度大于等于 768px 时设置字体大小为 24px */
  }
}
</style>
